
<template>
  <kt-vo-dialog
    v-model="open"
    title="弹出框测试"
    :datas="voFormDatas"
    @commit="commit"/>
  <el-button type="success" size="default" @click="openModel">打开弹出框</el-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { VoInput, VoSelect, VoSwitch } from '../../packages/index'
import { VoDatePicker } from '../../packages/index'
import { VoDivider } from '../../packages/index'

const open = ref<boolean>(false)
function openModel() {
  open.value = true
}

const voFormDatas = ref([
  [
    new VoDivider({
      content: '员工信息',
    }),
    new VoInput({
      label: '编号',
      value_key: 'id',
      span: 8,
    }),
    new VoInput({
      label: '姓名',
      value_key: 'name',
      span: 8,
    }),
    new VoSelect({
      label: '性别',
      value_key: 'gender',
      dict: 'gender',
      span: 8,
    }),
    new VoDivider({
      content: '其他信息',
    }),
    new VoSwitch({
      label: '已婚',
      value_key: 'merried',
      inactive_value: '1',
      active_value: '2',
      span: 5,
    }),
    new VoSwitch({
      label: '团员/党员',
      value_key: 'hero',
      inactive_value: '1',
      active_value: '2',
      span: 7,
    }),
  ]
])
function commit(formDatas, next) {
  console.log('所填数据是', formDatas)
  next(true)
}
</script>

<style lang="scss" scoped>
</style>